<template>
  <div class="container" v-if="value!=''">
    <top-nav :toLastPath="true">公司详情</top-nav>
    <img :src="value.info.company_info.img_url" class="company_logo"/>
    <div class="company_title">{{value.info.company_info.name}}</div>
    <!-- <div class="company_details"> {{value.info.company_info.size}} {{value.info.company_info.industry}}</div> -->
    <div class="company_details"> {{value.info.company_info.size}} </div>
    <div class="company_follow" @click.stop="guan(value.user_id)">{{message}}</div>
    <div class="company_introduce"><div>公司简介</div>{{value.info.company_info.introduction}}</div>
    <div class="information">
      <div class="information_title">
        <span>联系方式</span>
        <span v-if="showLogin">请登陆后查看</span>
      </div>
      <div class="information_details">
        <div class="information_name"> <span>联系人 </span>{{value.info.user_type=='personal'?value.info.user_info.realname :value.info.company_info.contacts}}</div>
        <div class="information_tel">电话号码 <img src="http://file.rzkeji.com/web/recruit/icon/tel.png" class="company_img"/><span>{{value.info.user_type=='personal'?value.contact_phone :value.info.company_info.contact_phone}}</span></div>
        <div class="information_btn" v-if="showLogin">
          <!-- <div>立即登陆</div> -->
          <router-link to="/login" tag='div'>立即登陆</router-link>
          <!-- <div>{{showLogin}}</div> -->
          <!-- <div>免费注册</div> -->
          <router-link to="/register" tag="div">免费注册</router-link>
        </div>
        <div class="information_tip" v-if="showLogin">个人会员登陆后才可以查看联系方式</div>
        <div class="location">
          <img src="http://file.rzkeji.com/web/recruit/icon/address.png" class="location_tag"/>
          <div class="location_xx">
            <div class="location_details">{{value.info.company_info.province}}-{{value.info.company_info.city}}-{{value.info.company_info.area}}</div>
            <div class="location_details">{{value.info.company_info.address_detail}}</div>
          </div>
        </div>
      </div>
    </div>
    <footer1 :tel="value.info.user_type=='personal'?value.contact_phone :value.info.company_info.contact_phone" :id="value.id" :type="details"></footer1>
  </div>
</template>

<script>
import axios from 'axios'
import footer1 from '@/components/footer';
import topNav from '@/components/topNav';
export default {
  data () {
    return {
      value:"",
      message:"",
      id:"",
      userToken:"",
      details:"details",
      showLogin:''
    }
  },
  computed:{
  },
  components: {
    footer1,
    topNav
  },

  methods: {
    async guan(value){
      let res=await this.$axios.post('/ucenter/setUserFollow',{user_token:this.userToken,f_user_id:value})
      this.message=res.data.data=='follow' ?'取消关注':'关注'
      this.$currency.showToast(res.data.message,1500,'success')
    },
    async getData(){
      let res=await this.$axios.get('/position/getPositionDetail',{params:{user_token:this.userToken,id:this.id}})
      this.value=res.data.data
      console.log(this.value)
      this.message=this.value.is_follow==0 ?'关注':'取消关注';
    },
    judCertDeta(){
        if(window.localStorage.getItem('userToken')){
          this.showLogin=false
        }else{
          this.showLogin=true
        }
      }
  },

  activated(){
    this.userToken=window.localStorage.getItem('userToken')
    this.id=this.$route.params.id
    this.getData()
    this.judCertDeta()//判断是否已经登录
  }
}
</script>

<style scoped>
.company_logo{width: 75px;height: 75px;margin:60px auto 10px;display: block;}
.company_title{width: 100%;height: 25px;    color: #484848;font-weight: bold;line-height: 25px;text-align: center;font-size: 16px;}
.company_details{width: 100%;height: 25px;line-height: 25px;text-align: center;color: #797979;font-size: 13px;}
.company_follow{width: 80px;height: 25px;background: #38B4DB;border-radius: 8px;margin: 5px auto;text-align: center;line-height: 25px;font-size: 14px;color: #FFFFFF;}
.company_introduce{padding:20px;color: #666;font-size: 16px;line-height: 22px;}
.company_introduce div{color: #484848;font-weight: 700;font-size: 18px;margin-bottom: 10px;}

.information{width: 330px;margin-left: 22.5px;}
.information_title{width: 100%;padding: 15px 0px;}
.information_title span:nth-of-type(1){font-weight: 700;color: #484848;line-height: 50px;font-size: 16px;}
.information_title span:nth-of-type(2){color: #0180cf;float: right;font-size: 13px;line-height: 50px;}
.information_details{width: 300px;margin-left: 37.5px;}
.information_name{font-weight: 700;color: #666;font-size: 19px;}
.information_name span:nth-of-type(1){color: #999;margin-left: 5px;font-size: 12px;}
.information_tel{color: #484848;font-size: 12px;margin-top: 15px;}
.information_tel img{width: 15px;height: 15px;margin-left: 10px;margin-right: 5px;vertical-align: middle;}
.information_tel span:nth-of-type(1){color:red;font-size: 16px;font-family: Georgia,"Times New Roman",Times,serif;}
.information_btn{display: flex;justify-content: row;margin: 15px 0px;}
.information_btn div{width: 130px;line-height: 35px;text-align: center;color: #fff;    border-radius: 5px;    font-size: 15px;}
.information_btn div:nth-of-type(1){background: #08c;margin-right: 10px;}
.information_btn div:nth-of-type(2){    background: #ff9900;}
.information_tip{width: 280px;border-radius: 5px;color: #F26B01;text-align: center; font-size: 13px;background-color: #FFFFE9;border: 1px #F3EAC3 solid; line-height: 34px;margin-bottom:10px; }

.location{width: 280px;display: flex;justify-content: row;margin-top: 35px;}
.location_tag{width: 30px;height: 40px;}
.location_xx{width: 260px;margin-left: 5px;}
.location_xx div{width: 100%;line-height: 20px;    color: #484848;font-size: 15px;line-height: 23px;}
.location_xx div:nth-of-type(2){font-size: 12px;}
.location_xx div:nth-of-type(2) span{    color: #0180cf;margin-left: 15px;}
.report{width: 345px;margin-left: -35px;display: flex;justify-content: row;margin-top:45px;margin-bottom: 10px;}
.report_tip{width: 280px;}
.report_tip span{display: block;font-size: 13px;line-height: 23px;}
.report_tip span:nth-of-type(1){color: #ff552e;}
.report_tip span:nth-of-type(2){color: #333;}
.report_tag{float: right;width: 40px;    color: #ff552e;font-size: 12px;text-align: center;}
.report_tag img{width: 20px;height: 20px;margin-top: 5px;}

.information{margin-bottom:75px;}

.information_btn a{color:#fff}
</style>
